@lightspeed/cirrus-button

Button

The most essential element of a user interface.

Installation

First, make sure you have been through the Getting Started steps of adding Cirrus in your application.

If using Yarn:

yarn add @lightspeed/cirrus-button

Or using npm:

npm i -S @lightspeed/cirrus-button

Usage

Import required styles in your .scss:

@import '@lightspeed/cirrus-button/Button.css';

React Component

Props

Prop	Type	Description
children	React.ReactNode	The content to display inside the button
primary	boolean	Displays as success button
secondary	boolean	Displays as secondary button
danger	boolean	Displays as danger button
fill	boolean	Displays as fill button
size	enum['small', 'large', 'xlarge']	Sets the size of the button
block	boolean	Displays the button in full width
disabled	boolean	Disables the button
onClick	function	Callback when button is clicked
onFocus	function	Callback when button is focused
onBlur	function	Callback when button is blurred

Example

import React from 'react';
import Button from '@lightspeed/cirrus-button';

const MyComponent = () =>
  <div>
    <Button>My Button</Button>
  </div>;

export default MyComponent;

CSS Component

Classes

Besides the base class .cr-button you can use one of these classes:

Type	Class
primary	.cr-button--primary
secondary	.cr-button--secondary
danger	.cr-button--danger
fill	.cr-button--fill
block	.cr-button--block
small	.cr-button--small
large	.cr-button--large
xlarge	.cr-button--xlarge
disabled	.disabled

Example

<button type="button" class="cr-button">My Button</button>